<template>
  <div class="container">
    <div class="system-name">黑马人力资源管理系统</div>
    <el-form ref="from" :model="loginForm" :rules="loginRules">
      <el-form-item prop="mobile">
        <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input show-password v-model="loginForm.password" placeholder="请输入登录密码" />
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="loginForm.isAgree">同意《用户协议》</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button @click="login" class="btn-login" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        mobile: process.env.NODE_ENV === "development" ? "13800000002" : "",
        password: process.env.NODE_ENV === "development" ? "hm#qd@23!" : "",
        isAgree: process.env.NODE_ENV === "development" ? true : false
      },
      loginRules: {
        mobile: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号的格式错误",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            min: 6,
            max: 16,
            message: "密码长度必须在6-16个字符之间",
            trigger: "blur"
          }
        ],
        isAgree: [
          {
            //使用自定义校验来校验bool值
            validator: (rule, value, callback) => {
              value
                ? callback()
                : callback(new Error("你必须勾选同意用户协议！"));
            }
          }
        ]
      }
    };
  },
  methods: {
    //登录方法
    login() {
      //校验所有表单
      this.$refs.from.validate(async isOk => {
        if (isOk) {
          await this.$store.dispatch("user/login", this.loginForm);
          //登录成功后跳转到主页
          this.$router.push("/");
        }
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  width: 350px;
  margin: auto;
  margin-top: 120px;

  .system-name {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 50px;
    text-align: center;
  }

  .btn-login {
    width: 350px;
  }
}
</style>
